<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    .box-rgba {
        background-color: rgba(0, 0, 255, 0.5);
        /* 50% 透明蓝色背景 */
        color: black;
        /* 文字不受影响 */
    }

    .float-left {
        float: left;
        width: 100px;
        height: 100px;
        background: blue;
    }

    .normal-box {
        height: 150px;
        background: lightgray;
        overflow: hidden;
        /* 触发 BFC，避免被浮动覆盖 */
    }

    .box-opacity {
        opacity: 0.5;
        /* 整个 div 和子元素都半透明 */
    }

    .line {
        border-bottom: 0.5px solid red;
    }

    .thin-line {
        position: relative;
        margin-top: 24px;
    }

    .thin-line::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        /* 初始高度 1px */
        background: black;
        transform: scaleY(0.5);
        /* Y 轴缩放 0.5 倍 */
        transform-origin: 0 0;
        /* 从顶部开始缩放 */
    }

    .bfc {
        overflow: hidden;
    }

    .lineBox {
        border: 0.5px solid blue;
    }
</style>

<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <div class="line"></div>
    <div class="box-rgba">背景半透明，文字不透明</div>
    <div class="box-opacity">
        <p>我和父元素一起变透明</p>
    </div>
    <div class="float-left"></div>
    <div class="normal-box">我是普通元素，不会被浮动覆盖</div>
    <div class="thin-line"></div>
    <div class="bfc">
        <div class="lineBox"></div>
    </div>
</body>
<script>

    const myModule = (function () {
        let privateVar = "私有变量";

        function privateMethod() {
            console.log("私有方法");
        }

        return {
            publicMethod: function () {
                console.log("公共方法可以访问私有变量：" + privateVar);
            }
        };
    })();

    myModule.publicMethod();  // "公共方法可以访问私有变量：私有变量"
    myModule.privateMethod(); // 报错：privateMethod is not a function


    // const arrData = new Array(1, 32, 3)
    // console.log('arrData', arrData, arrData.sort(),);
    // console.log('flage', arrData.__proto__ === Array.prototype);

    const arrDataB = [{ id: 1 }, { id: 12 }, { id: 1 }, { id: 13 }]
    for (let i = 0; i < arrDataB.length; i++) {
        for (let j = i + 1; j < arrDataB.length; j++) {
            if (arrDataB[i].id == arrDataB[j].id) {
                arrDataB.splice(j, 1)
                j--
            }
        }
    }

    //方法2
    // const uniqueArr = []
    // arrDataB.forEach((val) => {
    //     if (!uniqueArr.find((el) => el.id === val.id)) {
    //         uniqueArr.push(val)
    //     }
    // })

    //  console.log('uniqueArr', uniqueArr)
    console.log('arrDataB', arrDataB)
    const obj = { name: 'dd' }
    obj.prototype.name = '张三'
    console.log('22', obj.name)

    // var（函数作用域，i 会泄漏）
    for (var i = 0; i < 3; i++) {
        setTimeout(() => console.log(i)) // 输出 3, 3, 3
    }

    // let（块级作用域，每次循环新生成一个 i）
    for (let i = 0; i < 3; i++) {
        setTimeout(() => console.log(i)) // 输出 0, 1, 2
    }
    navigator.geolocation.getCurrentPosition(
        (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
        (err) => console.error(err),
    )
    const ctx = document.getElementById('myCanvas').getContext('2d')
    ctx.fillStyle = 'red'
    ctx.fillRect(10, 10, 50, 50)
    const arr = [{ num: 1 }, { num: 2, children: [{ num: 4 }, { name: 'dd', num: 5 }] }, { num: 3 }]
    function add(arr) {
        let result = 0
        if (Array.isArray(arr)) {
            for (let i = 0; i < arr.length; i++) {
                result += arr[i].num
                if (arr[i].children) {
                    result += add(arr[i].children)
                }
            }
            return result
        }
    }
    console.log('dd', add(arr))
</script>

</html>